<!--
 * @Author: zjf
 * @Date: 2023-11-28 20:40:41
 * @LastEditors: zjf
 * @LastEditTime: 2023-11-30 18:55:04
 * @Description: 审计阶段6  审计签证单19
-->
<template>
  <l-layout class="l-tab-page" :top="queryHeight + 12">
    <template #top>
      <!-- <l-panel style="padding-bottom:0;">
        <l-query :span="5" :labelWidth="100" :height.sync="queryHeight" :items="queryItems" :formData="queryData"
          :loading="tableLoading" @search="handleSearch">
          <template #projectName>
            <el-input v-model="queryData.projectName" :placeholder="$t('请输入')" @change="handleSearch" />
          </template>
        </l-query>
      </l-panel> -->
      <l-fill-options :queryItems="queryItems" :queryData="queryData" @change="handleSearch"
        @changeHeight="(h) => queryHeight = h"></l-fill-options>
    </template>
    <l-panel style="padding-top:0;">
      <template #toolLeft>
        <div class="l-panel--item">
          <el-button type="primary" v-if="false && lr_hasPageAuth('Add', 'buttons')" size="mini" icon="el-icon-plus"
            @click="handleAdd()">新增</el-button>
        </div>
        <div class="l-panel--item">
          <l-excel-btns></l-excel-btns>
        </div>
      </template>
      <template #toolRight>
        <l-tool-btns :hasAdd="false" :hasTableSetting="true" @setting="lr_handleSettingTable"> </l-tool-btns>
      </template>

      <l-table ref="mainTable"   :loading="tableLoading" :columns="columns" :dataSource="tableData" :isPage="true"
        :pageTotal="tableTotal" :tablePage.sync="tableCurrentPage" @loadPageData="turnTablePage">
        <!-- 项目名称 -->
        <template v-slot:projectName="scope">
          <a slot="reference" @click="handleDetails(0, scope.row)">{{ scope.row.projectName || '---' }}</a>
        </template>
        <template v-for="(col, index) in lr_tableColumnsByToLabel(columns)" v-slot:[col.prop]="scope">
          <l-value-to-label :value="scope.row[col.prop]" :type="col.dataType" :code="col.dataCode"
            :valueKey="col.valueKey" :labelKey="col.labelKey" :options="col.options" :format="col.format"
            :setting="col.setting" :key="index"></l-value-to-label>
        </template>
        <l-table-btns :btns="tableBtns" :filterBtns="filterBtns" @click="lr_handleTableBtnClick"></l-table-btns>
      </l-table>
    </l-panel>

    <!-- 编辑表单 -->
    <l-dialog :title="$t(formTitle)" :visible.sync="formVisible" :height="700" :width="1000" @close="handleCloseForm"
      @opened="handleOpenedForm" :hasBtns="false">
      <l-process-form v-if="formVisible" ref="form" @close="handleCloseForm" @refresh="loadTableData"
        :config="formConfig"></l-process-form>
    </l-dialog>

    <l-project-details ref="DetailsDialog"></l-project-details>

    <l-stage-add ref="StageAdd" @refresh="loadTableData"></l-stage-add>

  </l-layout>
</template>

<script>
import config from "./columns";
import Table from "../../../js/table";
import { tableColmuns } from "./columns";
export default {
  mixins: [Table()],
  components: {
  },
  data() {
    return {
      formConfig: config,
      // 查询参数
      queryData: {
        projectName: "",
      },

      queryItems: tableColmuns,

      // 表格参数
      columns: config.tableColmuns,
      tableBtns: [
        { prop: 'Edit', label: '编辑' },
        { prop: 'Delete', label: '删除' },
      ],

    }
  },
  computed: {
    periodicProgressOptions() {
      return this.lr_dataItemOptions(this.lr_dataItem['periodicProgress'])
    },
  },
  mounted() {
    this.init()

    this.lr_loadDataItem('periodicProgress') // 阶段进展

  },
  methods: {
    init() {
      this.loadTableData()
    },

    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1
      }
      this.tableLoading = true
      let queryData = this.$deepClone(this.queryData)
      queryData.rows = this.tablePageSize
      queryData.page = this.tableCurrentPage
      queryData.sidx = 'modifyTime'
      queryData.sord = 'DESC'
      let data = await this.$awaitWraper(config.api.getPage(queryData))

      if (data != null) {
        this.tableData = data.rows.map(t => {
          t.projectName = t.projectInfo.projectName
          t.projectCode = t.projectInfo.projectCode
          return t
        })
        this.tableTotal = data.records
      }
      else {
        this.tableTotal = 0
        this.tableData = []
      }
      this.tableLoading = false
    },
    /** 删除 */
    handleDelete($index, row) {
      this.$confirm(this.$t('是否删除该条数据?'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(async () => {
        await config.api.remove(row.id)
        this.$message({
          type: 'success',
          message: this.$t('删除成功!')
        })
        this.loadTableData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('已取消删除!')
        })
      })
    },


  }
}
</script>
<style lang="scss" ></style>